<template>
  <el-dialog v-model="dialogTableVisible1" :show-close="true" width="50%">
    <div
      style="
        height: 465px;
        overflow: hidden;
        background-color: rgba(247, 247, 247, 0.903);
      "
    >
      <div style="position: absolute; top: 5px">
        <el-button style="margin-left: 5px" @click="updateRoleId" type="primary"
          >保存</el-button
        >
      </div>
      <div class="dialogDiv">
        <el-table
          ref="tableRole"
          :data="table1"
          border
          stripe
          :cell-style="cellStyle1"
          :header-cell-style="headerCellStyle"
          @selection-change="handleSelectionChange1"
          @row-click="RowClick1"
          :row-style="rowState"
          :row-key="(row:any) => row.roleId"
          :max-height="420"
          :height="420"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column fixed type="index" width="80" align="center" />
          <el-table-column prop="roleId" label="roleId" width="120" align="center" />
          <el-table-column prop="roleName" label="角色名称" width="120" align="center" />
          <el-table-column prop="remark" label="备注" width="120" align="center" />
        </el-table>
      </div>
    </div>
  </el-dialog>
  <el-dialog v-model="dialogTableVisible" :show-close="true" width="50%">
    <div
      style="
        height: 465px;
        overflow: hidden;
        background-color: rgba(247, 247, 247, 0.903);
      "
    >
      <el-form
        :model="userForm"
        class="demo-form-inline"
        :inline="false"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="id:">
          <el-input
            v-model="userForm.userId"
            disabled
            placeholder="系统自动生成:"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务员工号:" required>
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:" required>
          <el-input v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="业务员:" required>
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="部门名称:" required>
          <el-input v-model="userForm.bmmc"></el-input>
        </el-form-item>
        <el-form-item label="所属组织:" required>
          <el-input v-model="userForm.sszz"></el-input>
        </el-form-item>
        <el-form-item label="部门Id:" required>
          <el-input v-model="userForm.departmentId"></el-input>
        </el-form-item>
        <el-form-item label="是否启用:">
          <el-switch v-model="userForm.status"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="insertAdminUser" v-if="showInsertButton"
            >保存</el-button
          >
          <el-button type="primary" @click="updateAdminUser" v-if="!showInsertButton"
            >保存</el-button
          >
          <el-button type="danger" @click="deleteAdminUser" v-if="!showInsertButton"
            >删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
  <!-- 页面布局 -->
  <div>
    <el-container>
      <el-header height="65px" :style="{ 'border-bottom': '1px solid #ccc' }">
        <!-- 头部按钮 -->
        <el-row type="flex" justify="end" style="background-color: rgb(211, 227, 253)">
          <div>
            <el-button @click="searchButton" type="primary"> 查询</el-button>
            <el-button @click="selectPermissions" type="warning"> 角色分配</el-button>
            <el-button @click="inseartAdminUser" type="success"> 新增</el-button>
          </div>
          <!-- <div class="title">需求汇总统计表</div> -->
        </el-row>
        <div
          style="margin-left:6rem;height: 30px;width=100%; background:rgb(241,244,243);margin-bottom: 0;position: relative; display: flex; justify-content: flex-start;"
        >
          <el-input
            style="width: 10%; height: 25px; margin-left: 2px; margin-top: 2px"
            v-model="inputId"
            placeholder="用户名"
          >
            <template #prefix>
              <el-icon class=""><search /></el-icon>
            </template>
          </el-input>
          <el-input
            style="width: 10%; height: 25px; margin-left: 2px; margin-top: 2px"
            v-model="inputfabh"
            placeholder="业务员工号"
          >
            <template #prefix>
              <el-icon class=""><search /></el-icon>
            </template>
          </el-input>
        </div>
      </el-header>
      <el-container>
        <el-container>
          <el-main style="padding: 2px 2px 0 2px; margin-left: 6rem">
            <el-table
              v-loading="loading"
              ref="table"
              :data="tableData"
              border
              stripe
              :cell-style="cellStyle"
              :header-cell-style="headerCellStyle"
              @row-dblclick="handleRowClick"
              @selection-change="handleSelectionChange"
              @row-click="RowClick"
              :row-style="rowState"
              :row-key="(row:any) => row.userId"
              :max-height="screenHeight"
              :height="screenHeight"
              :summary-method="getSummaries"
              show-summary
            >
              <el-table-column fixed type="index" width="80" align="center" />
              <el-table-column fixed type="selection" width="50" align="center" />
              <el-table-column prop="userId" label="Id" width="120" align="center" />
              <el-table-column
                fixed
                prop="username"
                label="业务员工号"
                width="120"
                align="center"
              />
              <el-table-column prop="password" label="密码" width="120" align="center" />
              <el-table-column prop="name" label="用户名" width="120" align="center" />
              <el-table-column prop="sszz" label="所属组织" width="120" align="center" />
              <el-table-column
                prop="departmentId"
                label="部门Id"
                width="60"
                align="center"
              />
              <el-table-column prop="bmmc" label="部门名称" width="120" align="center" />
              <el-table-column prop="status" label="状态" width="80" align="center" />
              <el-table-column
                prop="register_time"
                label="创建时间"
                width="200"
                align="center"
              />
              <el-table-column
                prop="update_time"
                label="修改时间"
                width="200"
                align="center"
              />
            </el-table>
          </el-main>
          <el-footer style="height: 20px">
            <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="page"
                v-model:page-size="limit"
                :page-sizes="[50, 500, 1000, 1500, 2000, 8000]"
                :small="true"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
} from "vue";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import {
  ElButton,
  ElDialog,
  dialogEmits,
  ElMessage,
  ElTable,
  TableColumnCtx,
  ElMessageBox,
} from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../../axios/axiosInstance.ts";
import Cookies from "js-cookie";
import { format } from "date-fns";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
// crud封装组件
import * as crud from "../../components/utils/crud.ts";
import SearchTableDialog from "@/components/dialogs/SearchTableDialog.vue";
const router = useRouter();
const dialogTableVisible = ref(false);
const dialogTableVisible1 = ref(false);

// 权限控制
// const searchButtonPermissions11 = ref(false);
const showInsertButton = ref(true);
const menuId = ref(11);
const deleteAdminUser = () => {
  const userName = Cookies.get("userName");
  const stateValue = userForm.status ? 1 : 0;
  ElMessageBox.confirm("确认删除吗？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      axios({
        url: "/delete/Admin/User",
        method: "post",
        data: {
          userId: userForm.userId,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            center: true,
            showClose: true,
            grouping: true,
            offset: window.screen.height / 9,
            message: res.data.message,
            type: "success",
          });
          dialogTableVisible.value = false;
          searchButton();
          return;
        }
        ElMessage({
          center: true,
          showClose: true,
          grouping: true,
          offset: window.screen.height / 9,
          message: res.data.message,
          type: "error",
        });
      });
    })
    .catch(() => {});
};
const updateAdminUser = () => {
  const userName = Cookies.get("userName");
  const stateValue = userForm.status ? 1 : 0;
  if (!userForm.username) {
    ElMessage.error({
      message: "请填写业务员工号",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.password) {
    ElMessage.error({
      message: "请填写密码",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.name) {
    ElMessage.error({
      message: "请填写业务员",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.bmmc) {
    ElMessage.error({
      message: "请填写部门名称",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.sszz) {
    ElMessage.error({
      message: "请填写所属组织",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.departmentId) {
    ElMessage.error({
      message: "请填写部门Id",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  ElMessageBox.confirm("确认保存吗？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      axios({
        url: "/update/Admin/User",
        method: "post",
        data: {
          userName: userName,
          username: userForm.username,
          password: userForm.password,
          status: stateValue,
          name: userForm.name,
          bmmc: userForm.bmmc,
          sszz: userForm.sszz,
          departmentId: userForm.departmentId,
          userId: userForm.userId,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            center: true,
            showClose: true,
            grouping: true,
            offset: window.screen.height / 9,
            message: res.data.message,
            type: "success",
          });
          dialogTableVisible.value = false;
          searchButton();
          return;
        }
        ElMessage({
          center: true,
          showClose: true,
          grouping: true,
          offset: window.screen.height / 9,
          message: res.data.message,
          type: "error",
        });
      });
    })
    .catch(() => {});
};
const insertAdminUser = () => {
  const userName = Cookies.get("userName");
  const stateValue = userForm.status ? 1 : 0;
  if (!userForm.username) {
    ElMessage.error({
      message: "请填写业务员工号",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.password) {
    ElMessage.error({
      message: "请填写密码",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.name) {
    ElMessage.error({
      message: "请填写业务员",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.bmmc) {
    ElMessage.error({
      message: "请填写部门名称",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.sszz) {
    ElMessage.error({
      message: "请填写所属组织",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  if (!userForm.departmentId) {
    ElMessage.error({
      message: "请填写部门Id",
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
    });
    return;
  }
  ElMessageBox.confirm("确认保存吗？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      axios({
        url: "/insert/Admin/User",
        method: "post",
        data: {
          userName: userName,
          username: userForm.username,
          password: userForm.password,
          status: stateValue,
          name: userForm.name,
          bmmc: userForm.bmmc,
          sszz: userForm.sszz,
          departmentId: userForm.departmentId,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            center: true,
            showClose: true,
            grouping: true,
            offset: window.screen.height / 9,
            message: res.data.message,
            type: "success",
          });
          dialogTableVisible.value = false;
          searchButton();
          return;
        }
        ElMessage({
          center: true,
          showClose: true,
          grouping: true,
          offset: window.screen.height / 9,
          message: res.data.message,
          type: "error",
        });
      });
    })
    .catch(() => {});
};

const buttonVariables = {
  // searchButtonPermissions11,
};
const selectPermissionsButton = () => {
  const userName = Cookies.get("userName");

  axios({
    url: "/select/Permissions/Button",
    method: "post",
    data: {
      userName: userName,
      menuId: menuId.value,
    },
  }).then((res) => {
    res.data.forEach((button) => {
      const buttonName = button.buttonName;
      if (buttonVariables.hasOwnProperty(buttonName)) {
        buttonVariables[buttonName].value = true;
      }
    });
  });
};
selectPermissionsButton();
const userForm = reactive({
  userId: "",
  username: "",
  password: "",
  status: true,
  name: "",
  bmmc: "",
  sszz: "",
  departmentId: "",
});
// 计算高度
const screenHeight = ref(null);
const dynamicHeight = ref(null);
const dynamicHeightYtfl = ref(null);

const getScreenHeight = () => {
  console.log(window.innerHeight);
  screenHeight.value = window.innerHeight - 146 - 42 + 55;
  dynamicHeight.value = `${window.innerHeight - 55 + 55}px`;
  dynamicHeightYtfl.value = window.innerHeight - 120 + 55;
};
getScreenHeight();
// 表格
const handleRowClick = (row) => {
  userForm.userId = row.userId;
  userForm.username = row.username;
  userForm.password = row.password;
  userForm.name = row.name;
  userForm.bmmc = row.bmmc;
  userForm.sszz = row.sszz;
  userForm.departmentId = row.departmentId;
  userForm.status = row.status === "启用" ? true : false;
  dialogTableVisible.value = true;
  showInsertButton.value = false;
};

// 分页
const page = ref(1);
const limit = ref(50);
const total = ref(50);
const loading = ref(false);
const selectCookies = () => {};
selectCookies();

const handleSizeChange = (val: number) => {
  const userName = Cookies.get("userName");
  if (!userName) {
    router.push("/");
    return;
  }
  axios({
    url: "/select/Admin/User",
    method: "post",
    data: {
      name: inputId.value,
      username: inputfabh.value,
      page: page.value,
      limit: limit.value,
    },
  }).then((res) => {
    res.data.forEach((item) => {
      if (item.status === 0) {
        item.status = "未启用";
      } else if (item.status === 1) {
        item.status = "启用";
      }
    });
    tableData.value = res.data;
    if (res.data.length == 0) {
      total.value = 0;
      return;
    }
    total.value = res.data[0].total;
  });
};
const handleCurrentChange = (val: number) => {
  const userName = Cookies.get("userName");
  if (!userName) {
    router.push("/");
    return;
  }
  axios({
    url: "/select/Admin/User",
    method: "post",
    data: {
      name: inputId.value,
      username: inputfabh.value,
      page: page.value,
      limit: limit.value,
    },
  }).then((res) => {
    res.data.forEach((item) => {
      if (item.status === 0) {
        item.status = "未启用";
      } else if (item.status === 1) {
        item.status = "启用";
      }
    });
    tableData.value = res.data;
    if (res.data.length == 0) {
      total.value = 0;
      return;
    }
    total.value = res.data[0].total;
  });
};
// 新增按钮(弹窗)
const inseartAdminUser = () => {
  userForm.userId = "";
  userForm.username = "";
  userForm.password = "";
  userForm.status = true;
  userForm.name = "";
  userForm.bmmc = "";
  userForm.sszz = "";
  userForm.departmentId = "";
  dialogTableVisible.value = true;
  showInsertButton.value = true;
};
// 角色分配
const triggerRowClickByIndex = (index) => {
  const row = table1.value[index];
  if (row) {
    RowClick1(row);
  }
};
let specialRowsIndexes = [];
const selectPermissions = () => {
  if (selectedRows.value.length === 1) {
    const username = selectedRows.value[0].username;
    dialogTableVisible1.value = true;
    axios({
      url: "/select/Admin/Role/IsRole",
      method: "post",
      data: {
        username: username,
      },
    }).then((res) => {
      table1.value = res.data.roleListAll;
      specialRowsIndexes = res.data.roleListUserName.reduce((indexes, specialRow) => {
        const index = table1.value.findIndex((row) => row.roleId === specialRow.roleId);
        if (index !== -1) {
          indexes.push(index);
        }
        return indexes;
      }, []);
      console.log("特殊行在表格中的下标数组:", specialRowsIndexes);
      nextTick(() => {
        specialRowsIndexes.forEach((index) => {
          triggerRowClickByIndex(index);
        });
      });
    });
  } else {
    ElMessage({
      center: true,
      showClose: true,
      grouping: true,
      offset: window.screen.height / 9,
      message: "请选择一行进行操作",
      type: "warning",
    });
  }
};

// 搜索框
const inputId = ref("");
const inputfabh = ref("");
const searchButton = () => {
  const userName = Cookies.get("userName");
  if (!userName) {
    router.push("/");
    return;
  }
  axios({
    url: "/select/Admin/User",
    method: "post",
    data: {
      name: inputId.value,
      username: inputfabh.value,
      page: page.value,
      limit: limit.value,
    },
  }).then((res) => {
    res.data.forEach((item) => {
      if (item.status === 0) {
        item.status = "未启用";
      } else if (item.status === 1) {
        item.status = "启用";
      }
    });
    tableData.value = res.data;
    if (res.data.length == 0) {
      total.value = 0;
      return;
    }
    total.value = res.data[0].total;
  });
};

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[];
  data: T[];
}
const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计:";

      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      sums[index] = "";
    }
    sums[index] = "";
  });
  for (let hj = 0; hj < sums.length; hj++) {
    var val = sums[hj];
    // !isNaN(parseFloat(value)) && isFinite(value);
    if (!isNaN(parseFloat(val)) && isFinite(val)) {
      sums[hj] = parseFloat(sums[hj]).toFixed(2);
      sums[hj] = formatNumberToCurrency(sums[hj]); // 千分位格式化

      continue;
    }
  }

  return sums;
};

const handleAction2 = () => {};

// 进入页面
const selectpurposes = () => {
  const userName = Cookies.get("userName");
  if (!userName) {
    router.push("/");
    return;
  }
  axios({
    url: "/select/Admin/User",
    method: "post",
    data: {
      name: inputId.value,
      username: inputfabh.value,
      page: page.value,
      limit: limit.value,
    },
  }).then((res) => {
    res.data.forEach((item) => {
      if (item.status === 0) {
        item.status = "未启用";
      } else if (item.status === 1) {
        item.status = "启用";
      }
    });
    tableData.value = res.data;

    if (res.data.length == 0) {
      total.value = 0;
      return;
    }
    total.value = res.data[0].total;
  });
};

selectpurposes();

// 头部按钮
const selectedRows = ref([]);
const selectedRows1 = ref([]);

const table = ref();
const table1 = ref();
const tableRole = ref();
// 需要的，处理节点渲染问题
// const selectAdminRoleIsRole = () => {
//   const userName = Cookies.get("userName");
//   if (!userName) {
//     router.push("/");
//     return;
//   }
//   axios({
//     url: "/select/Role/UserName",
//     method: "post",
//     data: {
//       username: userName,
//     },
//   }).then((res) => {
//     table1.value = res.data;
//   });
// };

// selectAdminRoleIsRole();
const updateRoleId = () => {
  const roleIdArray = selectedRows1.value.map((row) => row.roleId);
  console.log("提取的 roleId 数组:", roleIdArray);
  console.log(selectedRows.value[0].userId);
  ElMessageBox.confirm("确认保存吗？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      axios({
        url: "/Insert/Admin/UserRole",
        method: "post",
        data: {
          userId: selectedRows.value[0].userId,
          roleIdArray: roleIdArray,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          ElMessage({
            center: true,
            showClose: true,
            grouping: true,
            offset: window.screen.height / 9,
            message: res.data.message,
            type: "success",
          });
          dialogTableVisible1.value = false;
          return;
        }
        ElMessage({
          center: true,
          showClose: true,
          grouping: true,
          offset: window.screen.height / 9,
          message: res.data.message,
          type: "error",
        });
      });
    })
    .catch(() => {});
};

const handleSelectionChange = (selection: any) => {
  selectedRows.value = selection;
};
const handleSelectionChange1 = (selection: any) => {
  selectedRows1.value = selection;
};
// Main表格
const tableData = ref([]);
// // 设置表头样式
const headerCellStyle = {
  // E9E9E7
  borderColor: "#B9C9C7",
  backgroundColor: "#F2F4FA", // 表头背景颜色
  fontWeight: "bold", // 表头文字粗细
  color: "#1F2129",
  // padding: "0 0 0 30px",
};
const rowState = (arg) => {
  return {
    height: "20px", // 设置合适的行高值
    fontSize: "12px", // 设置合适的字体大小值
    // color: "black",
  };
};
const RowClick = (row, selection) => {
  table.value.toggleRowSelection(row);
};
const RowClick1 = (row, selection) => {
  tableRole.value.toggleRowSelection(row);
};
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (selectedRows.value.find((selectedRow) => selectedRow.userId === row.userId)) {
    return {
      backgroundColor: "#DFF0DB !important",
      borderColor: "#B9C9C7",
      padding: "4px",
    };
  } else {
    // #E9E9E7
    // D9D9D7   C9C9C7 A9A9A7

    return { borderColor: "#B9C9C7", padding: "4px", margin: 0 };
  }
};
const cellStyle1 = ({ row, column, rowIndex, columnIndex }) => {
  if (selectedRows1.value.find((selectedRow) => selectedRow.roleId === row.roleId)) {
    return {
      backgroundColor: "#DFF0DB !important",
      borderColor: "#B9C9C7",
      padding: "4px",
    };
  } else {
    // #E9E9E7
    // D9D9D7   C9C9C7 A9A9A7

    return { borderColor: "#B9C9C7", padding: "4px", margin: 0 };
  }
};
</script>
<style scoped>
/* 悬停 */
/* #f9f9fc, #fef5f0 */
.el-table {
  /* --el-table-row-hover-bg-color: rgba(0, 158, 250, 0.219) !important; */
  /* --el-table-row-hover-bg-color: #fef5f0 !important; */
  --el-table-row-hover-bg-color: rgba(254, 245, 240, 0.8) !important;
}
/* 选中 */
.el-table {
  /* --el-table-row-hover-bg-color: #fef5f0 !important; */
  --el-table-row-hover-bg-color: rgba(254, 245, 240, 0.8) !important;
}

.custom-dialog {
  position: fixed;
  top: 12%;
  left: 50%;
  width: 20%;
  /* 其他样式... */
}
.vertical-line {
  width: 1px;
  height: 100%; /* 让竖线的高度与整个页面高度一致 */
  background-color: #d3d5d7; /* 分割线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%;
  bottom: 0;
  /* left: 13%; */
  left: 19.99%;
  transform: translateX(-50%);
}
.vertical-line1 {
  width: 1px;
  height: 100%; /* 让竖线的高度与整个页面高度一致 */
  background-color: #d3d5d7; /* 分割线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%;
  bottom: 0;
  right: 20%; /* 将竖线放置在页面中间 */
  transform: translateX(-50%);
}
.vertical-line2 {
  width: 100%; /* 让横线的宽度与整个页面宽度一致 */
  height: 2px;
  background-color: #d3d5d7; /* 横线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 8.5%; /* 设置横线的垂直位置，可以根据你的布局调整 */
}
.vertical-line3 {
  width: 100%; /* 让横线的宽度与整个页面宽度一致 */
  height: 1px;
  background-color: #d3d5d7; /* 横线的颜色，可以根据你的需求修改 */
  position: fixed;
  top: 4.5%; /* 设置横线的垂直位置，可以根据你的布局调整 */
  left: 0%;
}

/* 侧边树状 */
::v-deep .el-tree-node__content {
  /* height: 45px; */
  height: 4vh;
  line-height: inherit;
}
.title {
  font-size: 18px;
}
.demo-pagination-block {
  float: right;
}
::v-deep .el-table .cell {
  padding: 0;
}
::v-deep .el-header {
  padding: 0;
}
.flex-grow {
  flex-grow: 1;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.labs {
  margin-bottom: 0px;
}
.lab {
  background-color: rgba(247, 247, 247, 0.903);
  /* border-radius: 5px; */
  text-align: center;
  margin-bottom: 0px;
  text-align: right;
}
.dialogDiv {
  position: relative;
  top: 10px;
}
</style>
